<template>
  <div class="app-container">
    <el-form v-loading="formLoading" :model="queryParam" ref="queryForm" :inline="true">
      <el-form-item label="选择班级：">
        <el-select v-model="queryParam.className" placeholder="请选择" @click="getClass"> 
          <el-option v-for="item in classList" :key="item.id" :label="item.className" :value="item.className"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="学生姓名：">
        <el-input v-model="queryParam.stuName"></el-input>
      </el-form-item>
 

      <el-form-item>
        <el-button type="primary" @click="submitForm">查询</el-button>
        <router-link :to="{path:'/class/student/edit'}" class="link-left">
          <el-button size="mini" type="primary" icon="el-icon-plus" >添加</el-button>
        </router-link>
        <router-link :to="{path:'/class/student/edits'}" class="link-left">
          <el-button size="mini" type="primary" icon="el-icon-plus" >批量添加</el-button>
        </router-link>
        </el-form-item>
        
          <el-form-item>
        <el-button type="primary" v-on:click="exportExcel">下载模板</el-button>
      </el-form-item>
    </el-form>
          
    <el-table v-loading="listLoading" :data="tableData" border fit highlight-current-row style="width: 100%">
      <el-table-column prop="id" label="序号" width="100px"/>
      <el-table-column prop="className" label="班级名称"/>
      <el-table-column prop="stuName" label="学生姓名" />
      <el-table-column prop="gender" label="性别" width="80px;" :formatter="sexFormatter"/>
      <el-table-column prop="stuPhone" label="联系方式" width="160px"/>
     
      <el-table-column prop="createTime" label="创建时间" width="160px"/>
      <el-table-column label="状态" prop="isEnabled" width="80px">
        <template slot-scope="{row}">
          <el-tag :type="statusTagFormatter(row.isEnabled)">
            {{ statusFormatter(row.isEnabled) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column width="300px" label="操作" align="center">
        <template slot-scope="{row}">
          <el-button size="mini"  @click="changeStatus(row)" class="link-left">
            {{ statusBtnFormatter(row.isEnabled) }}
          </el-button>
          <router-link :to="{path:'/class/student/edit', query:{id:row.id,className:row.className}}" class="link-left">
            <el-button size="mini" >编辑</el-button>
          </router-link>
          
          <el-button  size="mini" type="danger" @click="deleteStudent(row)" class="link-left">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="queryParam.pageIndex" :limit.sync="queryParam.pageSize"
                @pagination="search"/>
  </div>
</template>

<script>
// import { mapGetters, mapState, mapActions } from 'vuex'
// import Pagination from '@/components/Pagination'
// import studentApi from '@/api/student'
// import axios from 'axios'
// import { getToken } from 'js-cookie';
// import {form} from "@/utils/request"
// import classApi from '@/api/class'
export default {
  components: { Pagination},
  data () {
    return {
      queryParam: {
        className:null,
        stuName:null,
        params:null,
        pageIndex: 1,
        pageSize: 10
      },
      formLoading: false,
      listLoading: true,
      tableData: [],
      total: 0
      }
  },
  created () {
    //this.initSubject()
    this.search()
    this.getClass();
  },
  methods: {
    search () {
      this.listLoading = true
      studentApi.getStudentPageList(this.queryParam).then(data => {
        const re = data.response
        this.tableData = re.list
        this.total = re.total
        this.queryParam.pageIndex = re.pageNum
        this.listLoading = false
      })
    },
    changeStatus (row) {
      let _this = this
      studentApi.changeStatus(row.id).then(re => {
        if (re.code === 1) {
          row.isEnabled = re.response
          _this.$message.success(re.message)
        } else {
          _this.$message.error(re.message)
        }
      })
    },
     getClass() {
      this.formLoading = true;
      classApi.getClassPageList({ condition: null, pageIndex: 1, pageSize: 100 })
        .then(res => {
          this.formLoading = false;
          if (res.code == 1) {
            this.classList = res.response.list;
          }
        })
        .catch(res => {
          this.formLoading = false;
        });
    },
    deleteStudent (row) {
      let _this = this
      studentApi.deleteStudent(row.id).then(re => {
        if (re.code === 1) {
          _this.search()
          _this.$message.success(re.message)
        } else {
          _this.$message.error(re.message)
        }
      })
    },
    submitForm () {
      this.queryParam.pageIndex = 1
      this.search()
    },
    // 下载模板
    exportExcel () {
      axios({
        method: "post",
        url: "/api/admin/excel/export_student_template", // 请求地址
        data: null, // 参数
        responseType: "blob", // 表明返回服务器返回的数据类型
        headers: {
          "Content-Type": "application/json"
        }
      }).then(res => { // 处理返回的文件流
    
        const blob = new Blob([res.data]);
        const fileName = "学生模板.xlsx";
        const elink = document.createElement("a");
        elink.download = fileName;
        elink.style.display = "none";
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click();
        URL.revokeObjectURL(elink.href); // 释放URL 对象
        document.body.removeChild(elink);
      });
    },

    sexFormatter  (row, column, cellValue, index) {
      return this.enumFormat(this.sexEnum, cellValue)
    },
    statusFormatter (isEnabled) {
      return this.enumFormat(this.statusEnum, isEnabled)
    },
    statusTagFormatter (isEnabled) {
      return this.enumFormat(this.statusTag, isEnabled)
    },
    statusBtnFormatter (isEnabled) {
      return this.enumFormat(this.statusBtn, isEnabled)
    }
  },

  computed: {
    ...mapGetters('enumItem', [
      'enumFormat'
    ]),
    ...mapState('enumItem', {
      sexEnum: state => state.student.sexEnum,
      statusEnum: state => state.student.statusEnum,
      statusTag: state => state.student.statusTag,
      statusBtn: state => state.student.statusBtn,
    })
  }
}
</script>
